.code-rules{
  .title-brief{
    padding: 0 20px;
    line-height: 1.5;
    text-indent: 2em;
  }
  .table-brief{
    width: 14%;
    margin: 16px auto;
    text-align: center;
    thead tr th,
    tbody tr td{
      line-height: 28px;
      font-weight: 500;
    }
  }
}


.rule-map{
  margin: 0 20px;
  .rule-category{
    position: relative;
    border: 1px solid #ccc;
    margin-top: -1px;

    .rule-key{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 160px;
      font-size: 0;
      padding: 12px;
      text-align: center;
      code{
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
      }
      .middle-helper{
        display: inline-block;
        height: 100%;
        font-size: 14px;
        vertical-align: middle;
      }
    }
    .rule-items{
      overflow: hidden;
      margin-left: 184px;
      border-left: 1px solid #ccc;
      min-height: 50px;

      .rule-item{
        float: left;
        padding: 4px 14px;

        code{
          display: inline-block;
        }
        p{
          display: inline-block;
        }
      }
    }
  }
}